.container {
    margin: 0 auto;
    width: 100%;
    max-width: 1400px;
}
#wrap > section.section.section1.active > div > h2 { font-size:32px; }
#wrap > section.section.section1.active > div > p { font-size:24px; }

.section {opacity: 0; transition: all .5s ease .3s; -webkit-transition: all .5s ease .3s; transform: translateY(50px); -webkit-transform: translateY(50px); overflow: hidden;}
.section h2 {margin-bottom: 15px; text-align: center; font-size: 3.7rem; font-weight: 600; color: #000; opacity: 0; transition: all .5s ease .5s; -webkit-transition: all .5s ease .5s; transform: translateY(-20px); -webkit-transform: translateY(-20px);}
.section h2.kor {font-size: 3.4rem;}
.section h2 + p {margin-bottom: 40px; text-align: center; font-size: 1.3rem; color: #767676; opacity: 0; transition: all .5s ease .5s; -webkit-transition: all .5s ease .5s; transform: translateY(-20px); -webkit-transform: translateY(-20px);}

.section.active,
.section.active h2,
.section.active h2 + p {opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px);}

/* DJU NEWS */
.section1 {padding: 85px 0 100px; min-height: 525px; color: #fff; background-color: #fff;}
.section1 .tab01 {position: relative;}
.section1 .tab01 > li > a {position: relative; float: left; display: inline-block; padding: 10px 10px 20px; width: 33%; text-align: center; font-size: 25px; font-weight: 400; color: #000; transition: all 0.25s ease; -webkit-transition: all 0.25s ease;}
.section1 .tab01 > li > a:hover { background:#eef7ff; } /*미반영*/
.section1 .tab01 > li > a:before {position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background-color: #e4e5ee; content: "";}
.section1 .tab01 > li > a:after {position: absolute; bottom: 0; left: 0; width: 0; height: 7px; background-color: #F14E47; content: ""; transition: all 0.25s ease; -webkit-transition: all 0.25s ease;} /*컬러변경*/
.section1 .tab-info {position: absolute; top: 90px; left: 0; width: 100%; height: 0; opacity: 0; visibility: hidden; transition: all 0.25s ease; -webkit-transition: all 0.25s ease;}

.section1 .list li {position: relative; float: left; padding: 0 40px 0 170px; width: 50%; height: 180px; overflow: hidden;}
.section1 .list li .date {position: absolute; top: 0; left: 0; display: block; padding-top: 32px; width: 140px; height: 100%; text-align: center; font-size: 2rem; color: #000; background-color: #ebebeb;}
.section1 .list li .date em {display: block; margin-top: 12px; font-size: 3.2rem; font-weight: 700;}
.section1 .list li .subj {margin-bottom: 15px; font-size: 18px; font-weight: 600; color: #323232;}
.section1 .list li .cont {margin-bottom: 15px; max-height: 50px; line-height: 1.6; color: #767676; overflow: hidden;}
.section1 .list li .more {position: relative; display: inline-block; padding-right: 15px; color: #727272; transition:all 0.3s; }
.section1 .list li .more:before {position: absolute; top: 0; right: 0; font-family: xeicon; content: "\e914";}
.section1 .list li .more:hover { color:#F14E47; }

.section1 .tab01 > li.active > a {color: #F14E47;} /*컬러변경*/
.section1 .tab01 > li.active > a:after {width: 100%;}
.section1 .tab01 > li.active .tab-info { margin-top: 20px; opacity: 1; visibility: visible; transition: all 0.25s ease; -webkit-transition: all 0.25s ease; } /*height: 140px;*/

.section1 .tab01 .bx-controls-direction a {position: absolute; top: 20px; padding-left: 50px; width: 50px; height: 50px; line-height: 48px; color: #000; background-color: #fff; border: 1px solid #ddd; overflow: hidden; transition: all 0.25s ease; -webkit-transition: all 0.25s ease;}
.section1 .tab01 .bx-controls-direction a:hover {color: #fff; background-color: #F14E47; border: 1px solid #F14E47; }
.section1 .tab01 .bx-controls-direction a::before {position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; font-family: 'xeicon'; font-size: 32px;}
.section1 .tab01 .bx-controls-direction a.bx-prev {left: -110px;}
.section1 .tab01 .bx-controls-direction a.bx-next {right: -110px;}
.section1 .tab01 .bx-controls-direction a.bx-prev::before {content: '\e93c';}
.section1 .tab01 .bx-controls-direction a.bx-next::before {content: '\e93f';}


.section2 {position: relative; padding: 85px 0; height: 500px; 
    background: rgb(0,56,170);
    background: -moz-linear-gradient(-45deg, rgba(0,56,170,1) 0%, rgba(13,93,170,1) 30%, rgba(13,93,170,1) 70%, rgba(13,147,165,1) 100%);
    background: -webkit-linear-gradient( 
-45deg
 , rgba(0,56,170,1) 0%,rgba(13,93,170,1) 30%,rgba(13,93,170,1) 70%,rgba(13,147,165,1) 100%);
    background: linear-gradient( 
315deg
 , rgba(0,56,170,1) 0%,rgba(13,93,170,1) 30%,rgba(13,93,170,1) 70%,rgba(13,147,165,1) 100%);
} /*background-color: #232e42;*/ /*background:#194f5c;*/
.section2 .container {position: relative; height: 330px;}
section.section2 h2 {position: relative; padding-top: 40px; text-align: left; font-size: 2.2rem; color: #fff; line-height: 1.2;}
section.section2 h2:before {position: absolute; top: 0; left: 0; width: 30px; height: 4px; background-color: #fff; content: "";}
section.section2 h2 strong {font-size: 2.7rem; font-weight: 900;}
section.section2 h2 + p {line-height: 1.5; text-align: left; color:rgba(255,255,255,0.7); } /*color: #7d8693;*/


.section2 .prev,
.section2 .next {position: absolute;bottom: 0;left: 0;display: inline-block;width: 44px;height: 44px;/* line-height: 42px; */text-align: center;font-size: 22px;color: #fff;border:1px solid rgba(255,255,255,0.2);transition: all 0.25s ease;-webkit-transition: all 0.25s ease;} /*#586072*/
.section2 .next {left: 50px;}
.section2 .prev:hover,
.section2 .next:hover { background-color: #F14E47; border: 1px solid #F14E47; } /*컬러변경*/


.section2 .outer {position: absolute; top: 85px; right: 0; width: 1290px; height: 330px;}
.section2 .outer:after {position: absolute; top: 0; right: 0; width: 315px; height: 330px;  content: ""; background: rgba(9,70,129,0.5); } /*background-color: rgba(35, 46, 66, 0.85);*/ /*rgba(5,54,66,0.85);*/
.section2 .outer .list > li {float: left;}
.section2 .outer .list > li { background:#fff; }
.section2 .outer .list > li h3 { background:#fff; padding:15px; font-weight:600; font-size:24px; height: 60px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
color: #F14E47; 
background: rgb(149,0,175);
    background: -moz-linear-gradient(left, rgba(149,0,175,1) 0%, rgba(13,93,170,1) 40%, rgba(13,93,170,1) 60%, rgba(0,75,168,1) 100%);
    background: -webkit-linear-gradient(left, rgba(149,0,175,1) 0%,rgba(13,93,170,1) 40%,rgba(13,93,170,1) 60%,rgba(0,75,168,1) 100%);
    background: linear-gradient(to right, rgba(149,0,175,1) 0%,rgba(13,93,170,1) 35%,rgba(13,93,170,1) 65%,rgba(0,75,168,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d93a5', endColorstr='#004ba8',GradientType=1 );
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-fill-color: transparent;
}

.section2 .outer li .content_box { height: 270px; color: #fff; background: #eef7ff; padding: 15px; }
.section2 .outer li .content_box p.tit_txt {  color: #1771bf; font-weight: 500; position: relative; margin-bottom: 5px; }
.section2 .outer li .content_box .con_txt { margin-left: 15px; margin-bottom: 15px; color: #505050; font-size: 18px; }
.section2 .outer li .content_box p.tit_txt::before { content: ''; width: 5px; height: 16px;  position: absolute; top: 6px; left: 5px; border-radius: 10px; }
.section2 .outer li .content_box p.tit_txt span { padding: 0 15px; font-size: 18px; }


/*.section2 .outer .list > li + li {margin-left: 10px;}*/
.section2 .outer .list > li > a {position: relative; display: block; width: 315px; height: 330px; overflow: hidden;}
.section2 .outer .list > li > a > img {max-width: 100%; transition: all .5s ease; -webkit-transition: all .5s ease;}
.section2 .outer .list > li > a > p {position: relative; width: 100%; height: 110px; text-align: center; font-size: 2rem; color: #fff; background-color: #000;}
.section2 .outer .list > li > a > p > span {position: absolute; top: 50%; left: 0; width: 100%; line-height: 1.3; font-size:18px; transform: translateY(-50%); -webkit-transform: translateY(-50%);}
.section2 .outer .list .up {position: absolute; bottom: 0; left: 0; padding: 90px 45px; width: 100%; height: 0; text-align: center; color: #fff; background-color: rgba(241,78,71,0.95); opacity: 0; overflow: hidden; transition: all 0.25s ease; -webkit-transition: all 0.25s ease;}
.section2 .outer .list .up strong {position: relative; display: block; margin-bottom: 30px; padding-bottom: 30px; font-size: 2.2rem;}
.section2 .outer .list .up strong:before {position: absolute; bottom: 0; left: 50%; margin-left: -15px; width: 30px; height: 2px; background-color: #fff; content: "";}
.section2 .outer .list .up p {margin-bottom: 50px; height: 70px; line-height: 1.5; overflow: hidden;}
.section2 .outer .list .up span {display: inline-block; width: 160px; height: 50px; line-height: 48px; border: 1px solid rgba(255,255,255,0.5);}

.section2 .outer .list > li > a:hover > img {transform: scale(1.1); -webkit-transform: scale(1.1);}
.section2 .outer .list > li > a:hover .up {height: 100%; opacity: 1;}

@media screen and (max-width: 1899px) {
	/* CENTERS AND BUSINESS GROUP */
	.section2 {height: 795px;}
	.section2 .container {padding-right: 100px; height: 625px;}
	#contents > section.section2 h2 strong br,
	#contents > section.section2 h2 + p br {display: none;}

	.section2 .prev,
	.section2 .next {top: 95px; right: 5px; bottom: auto; left: auto;}
	.section2 .prev {right: 48px;}

	.section2 .outer {top: 280px; right: 50%; margin-right: -645px;}
	.section2 .outer:after {display: none;}
}

@media screen and (max-width: 768px) {


	/* CENTERS AND BUSINESS GROUP */
	.section2 {height: 710px;}
	.section2 .outer {top: 230px; margin-right: -805px;}
}

@media screen and (max-width: 1299px) {

	.section1 {padding: 41px 0 10px 0; min-height: 365px;}

#wrap > section.section.section1.active > div > h2 { font-size:24px; }
#wrap > section.section.section1.active > div > p { font-size:20px; }

	.section1 .tab-info {top: 70px;}
	.section1 .tab01 > li > a { font-size:20px; }
	.section1 .list li {padding: 0 10px 0 120px; height: 100px;}
	.section1 .list li .date {padding-top: 10px; font-size: 16px;width: 100px;}
	.section1 .list li .subj {margin-bottom: 5px; height: 50px; overflow: hidden; font-size:16px; }
	.section1 .list li .cont {margin-bottom: 0px; max-height: 22px; line-height: 1.6; font-size:14px; color: #767676; overflow: hidden;}
	.section1 .list li .date em {display: block; margin-top: 8px; font-size: 2rem; font-weight: 700;}
	.section1 .tab01 > li.active .tab-info {height: 100px;}
	.section1 .list li .more { font-size:14px; }
	.section1 .tab01 .bx-wrapper {padding: 0 20px 0 20px;}
	.section1 .tab01 .bx-controls-direction a.bx-prev {left: -22px;}
	.section1 .tab01 .bx-controls-direction a.bx-next {right: -22px;}

	.section2 {padding: 40px 15px 50px; height: 680px;}
	#contents > section.section2 h2 {padding-top: 20px;}
	#contents > section.section2 h2:before {width: 22px; height: 3px;}

section.section2 h2 {
    position: relative;
    padding-top: 40px;
    text-align: left;
    font-size: 1.2rem;
    color: #fff;
    line-height: 1.2;
}
section.section2 h2 strong {
    font-size: 1.7rem;
    font-weight: 900;
}
section.section2 h2 + p {
    line-height: 1.5;
    text-align: left;
	font-size:13px;
    /*color: #7d8693;*/
}

	.section2 .prev,
	.section2 .next {right: 0;}
	.section2 .prev {right: 50px;}

	.section2 .outer {top: 200px;}

}

@media screen and (max-width: 1000px) {
#wrap > section.section.section1.active > div > h2 { font-size:22px; }
#wrap > section.section.section1.active > div > p { font-size:18px; }
}

@media screen and (max-width: 1000px) {
	.section1 {padding: 41px 0 10px 0; min-height: 365px;}



	.section1 .tab-info {top: 70px;}
	.section1 .tab01 > li > a { font-size:20px; }
	.section1 .list li {padding: 0 10px 0 120px; height: 100px;}
	.section1 .list li .date {padding-top: 10px; font-size: 16px;width: 100px;}
	.section1 .list li .subj {margin-bottom: 5px; height: 50px; overflow: hidden; font-size:16px; }
	.section1 .list li .cont {margin-bottom: 0px; max-height: 22px; line-height: 1.6; font-size:14px; color: #767676; overflow: hidden;}
	.section1 .list li .date em {display: block; margin-top: 8px; font-size: 2rem; font-weight: 700;}
	.section1 .tab01 > li.active .tab-info {height: 100px;}
	.section1 .list li .more { font-size:14px; }
	.section1 .tab01 .bx-wrapper {padding: 0 20px 0 20px;}
	.section1 .tab01 .bx-controls-direction a.bx-prev {left: -22px;}
	.section1 .tab01 .bx-controls-direction a.bx-next {right: -22px;}

}

/*공통*/
.br_mobile_on { display:none; }
.br_mobile_off { display:none; }
@media (max-width:768px) {
	.br_mobile_on { display:block; }
	.br_mobile_off { display:none; }
}